<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>添加文章</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/lib/layui/css/layui.css">
    <link rel="stylesheet" href="/css/scroll-bar.css">
    <link rel="stylesheet" href="/css/sub-page.css">
</head>
<body>
<div class="ok-body">
    <blockquote class="layui-elem-quote">
        <p>校园环境封面图尺寸宽高为<span class="size-tips">560:360</span></p>
    </blockquote>
    <!--面包屑导航区域-->
    <div class="ok-body-breadcrumb">
            <span class="layui-breadcrumb">
                <a><cite>首页</cite></a>
                <a><cite>学院概况</cite></a>
				<a><cite>校园环境</cite></a>
				<a><cite>添加文章</cite></a>
            </span>
        <a class="layui-btn layui-btn-sm  cms-btn-refresh" href="javascript:location.replace(location.href);"
           title="刷新">
            <i class="layui-icon layui-icon-refresh"></i>
        </a>
    </div>
    <!--form表单-->
    <form class="layui-form layui-form-pane ok-form">
        <div class="layui-row layui-col-space15">

            <div class="layui-form-item">
                <label class="layui-form-label">标题</label>
                <div class="layui-input-block">
                    <input type="text" name="title"
                           autocomplete="off" class="layui-input" lay-verify="required">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">排序</label>
                <div class="layui-input-block">
                    <input type="input" class="layui-input" name="sort" value="1">
                </div>
            </div>
            <div class="layui-row" style="min-height: 200px">
                <div class="layui-col-sm12">
                    <img id="articleCover" style="height: 200px">
                </div>
            </div>
            <div class="layui-row layui-hide">
                <input name="photo" type="text" class="layui-input layui-disabled" lay-verify="required" readonly>
            </div>
            <div class="layui-form-item">
                <button type="button" class="layui-btn" id="uploadImg">
                    <i class="layui-icon">&#xe67c;</i>上传照片
                </button>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="add">立即提交</button>
            </div>
        </div>
    </form>
</div>
<!--js逻辑-->
<script src="/lib/jquery/jquery-1.12.4.min.js"></script>
<script src="/lib/layui/layui.js"></script>
<script src="/lib/ckeditor/ckeditor.js"></script>
<script>
    layui.use(['element', 'form', 'upload'], function () {
        var element = layui.element;
        var form = layui.form;
        let upload = layui.upload;

        //上传图片
        upload.render({
            elem: '#uploadImg' //绑定元素
            , url: '/manage/upload/' //上传接口
            , field: 'upload',
            before: function (obj) {
                layer.load(); //上传loading
            },
            done: function (res) {
                if (res.uploaded) {
                    $('#articleCover').attr("src", res.url);
                    // layer.msg('上传成功')
                    $('input[name="photo"]').val(res.url);
                } else {
                    layer.alert(res.error.message)
                }
                layer.closeAll('loading'); //关闭loading
            },
            error: function () {
                layer.closeAll('loading'); //关闭loading
            }

        });
        form.on('submit(add)', function (data) {
            $.ajax({
                url: '/manage/envs',
                data: data.field,
                // contentType:'application/json',
                type: 'POST',
                dataType: 'json',
                success: function (resp) {
                    if (resp) {
                        layer.msg("添加成功！", {icon: 6, time: 1000, anim: 4}, function () {
                            parent.layer.close(parent.layer.getFrameIndex(window.name));
                        });
                    }
                }
            });
            return false;
        });
    })
</script>
</body>
</html>
